<template>
  <div class="w">
    <header>
      <div class="logo">
        <a href="/"> <img src="@/assets/images/logo.png" alt="" /></a>
      </div>
    </header>
    <div class="registerarea">
      <h3>
        注册新用户
        <div class="login">
          我有账号，去<router-link to="login">登录</router-link>
        </div>
      </h3>
      <div class="reg_form">
        <form>
          <ul>
            <!-- <li><label for="">手机号：</label> <input type="tel" class="inp">
                            <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请重新输入 </span></li> -->
            <!-- <li><label for="">短信验证码：</label> <input type="text" class="inp">
                            <span class="success"> <i class="success_icon"></i> 短信验证码输入正确 </span></li> -->
            <li>
              <label for="">账号绑定邮箱：</label>
              <input type="email" class="inp" v-model="userEmail" />
              <span class="error" v-show="false">
                <i class="error_icon"></i> 邮箱格式不正确，请重新输入
              </span>
            </li>
            <li>
              <label for="">请输入用户名：</label>
              <input type="text" class="inp" v-model="userName" />
              <span class="error" v-show="forbidUserName">
                <i class="error_icon"></i> 用户名含非法字符，请重新输入
              </span>
            </li>
            <li>
              <label for="">登录密码：</label>
              <input type="password" class="inp" v-model="userPassword" />
              <span class="success">
                <i class="success_icon"></i> 密码可用
              </span>
            </li>
            <li class="safe">
              安全程度 <em class="ruo">弱</em> <em class="zhong">中</em>
              <em class="qiang">强</em>
            </li>
            <li>
              <label for="">确认密码：</label>
              <input
                type="password"
                class="inp"
                v-model="userPasswordConfirm"
              />
              <span v-show="passwordEqual == 0">
                <i class="error_icon"></i> 两次密码不一致，请重新输入
              </span>
            </li>
            <li class="agree">
              <input type="checkbox" name="" id="" checked /> 同意协议并注册
              <router-link to="developing">《知晓用户协议》</router-link>
            </li>
            <li>
              <button
                class="btn"
                @click="uRegister(userEmail, userPassword, userName)">完成注册
              </button>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import { userRegister } from "@/api/api.js";
export default {
  name: "Register",
  data() {
    return {
      userEmail: "",
      userPassword: "",
      userPasswordConfirm: "",
      userName: "",
      passwordEqual: 1,
      forbidUserName: false,
    };
  },
  methods: {
    uRegister: async function (userEmail, userPassword, userName) {
      if (this.userPassword != this.userPasswordConfirm) {
        this.passwordEqual = 0;
        this.$message.error("两次密码输入不一致！请重试！");
        return;
      } else {
        this.passwordEqual = 1;
      }

      let res = await userRegister(userEmail, userPassword, userName);
      res = res.data;
      if (res.UserRegisterResult == "Success") {
        // console.log(userEmail, ":", userName);
        //Real Login Method
        this.$store.commit('Login',
            res.UserRegisterObjectResult);
        //Real Login Method
        this.$message.success("注册成功！");
        this.$router.push("/");
      } else if (res == "Fail") {
        this.$message.error("注册失败！请检查后重试！");
      } else if (res == "Parameter-Null") {
        this.$message.error("注册失败！ 服务器错误！");
        console.log("未传入参数！");
      } else if (res == "Empty") {
        this.$message.error("注册失败！ 服务器错误！");
        console.log("参数值为空！");
      } else if (res == "Existed") {
        this.$message.error("注册失败！该用户已存在！");
      }
    },
  },
};

import "@/assets/css/register.css";
import "@/assets/css/base.css";
</script>

<style>
</style>
